<template>
    <div>
        <global-tables
            @changePage="handleChangePage"
            :total="total"
            @handleAllSelect="handleAllSelect"
            :list="list"
            :loading="loading"
            :columns="columns"
            :current="search.Page"
        >
            <Form :model="search" :label-width="80">
                <div class="table-top-wrap">
                    <div>
                        <div>
                            <Button class="features-btn" @click="handleBtnClick(null,'examine')">
                                <Icon type="md-add" size="18" />审核
                            </Button>
                        </div>
                    </div>
                    <div class="table-top-wrap-bottom">
                        <div>
                            <Select v-model="search.ShopID" style="width:170px;margin-right: 10px;" placeholder="请选择门店">
                                <Option v-for="item in shopList" :value="item.ID" :key="item.ID">{{ item.ShopName }}</Option>
                            </Select>
                            <input
                                type="text"
                                style="width:230px;"
                                class="style-input"
                                @keyup.enter="handleSearch"
                                v-model="search.keyword"
                                placeholder=" 请输入护士详细信息	"
                            />
                            <i-input style="display:none"></i-input>
                        </div>
                        <div>
                            <Button icon="ios-search" @click="handleSearch" class="search-btn">搜索</Button>
                        </div>
                    </div>
                </div>
            </Form>
            <Modal :mask-closable="false" v-model="isModal" :title="ModalTitle" width="500">
                <div v-if="isModal">
                    <Form :label-width="100" ref="formValidate" :model="formValidate" :rules="ruleValidate">
                        <Row>
                            <FormItem label="姓名" prop="RealName">
                                <i-input v-if="!isDisabled" v-model="formValidate.RealName" placeholder="请输入姓名"></i-input>
                                <span v-else>{{formValidate.RealName}}</span>
                            </FormItem>
                            <FormItem label="性别" prop="Sex">
                                <RadioGroup v-if="!isDisabled" v-model="formValidate.Sex">
                                    <Radio label="false">女</Radio>
                                    <Radio label="true">男</Radio>
                                </RadioGroup>
                                <span v-else>{{formValidate.Sex}}</span>
                            </FormItem>
                            <FormItem label="邮箱" prop="Email">
                                <i-input v-if="!isDisabled" v-model="formValidate.Email" placeholder="请输入邮箱"></i-input>
                                <span v-else>{{formValidate.Email}}</span>
                            </FormItem>
                            <FormItem label="手机号" prop="MobilePhone">
                                <i-input v-if="!isDisabled" v-model="formValidate.MobilePhone" placeholder="请输入手机号"></i-input>
                                <span v-else>{{formValidate.MobilePhone}}</span>
                            </FormItem>
                            <FormItem label="生日" prop="Birthday">
                                <FormItem prop="date">
                                    <DatePicker style="width: 200px" v-if="!isDisabled" type="date" placeholder="请选择生日" v-model="formValidate.Birthday"></DatePicker>
                                    <span v-else>{{formValidate.Birthday}}</span>
                                </FormItem>
                            </FormItem>
                            <FormItem label="现住址" prop="Address">
                                <i-input v-if="!isDisabled" v-model="formValidate.Address" placeholder="请输入现住址"></i-input>
                                <span v-else>{{formValidate.Address}}</span>
                            </FormItem>
                            <FormItem label="学历" prop="Education">
                                <Select v-if="!isDisabled" v-model="formValidate.Education">
                                    <Option value="高中及以下">高中及以下</Option>
                                    <Option value="专科">专科</Option>
                                    <Option value="本科">本科</Option>
                                    <Option value="硕士及以上">硕士及以上</Option>
                                </Select>
                                <span v-else>{{formValidate.Education}}</span>
                            </FormItem>
                            <FormItem label="民族" prop="Nation">
                                <i-input v-if="!isDisabled" v-model="formValidate.Nation" placeholder="请输入民族"></i-input>
                                <span v-else>{{formValidate.Nation}}</span>
                            </FormItem>
                            <FormItem label="婚姻" prop="Marry">
                                <Select v-if="!isDisabled" v-model="formValidate.Marry">
                                    <Option value="1">未婚</Option>
                                    <Option value="2">已婚</Option>
                                    <Option value="3">离异</Option>
                                    <Option value="4">丧偶</Option>
                                </Select>
                                <span v-else>{{formValidate.Marry}}</span>
                            </FormItem>
                        </Row>
                    </Form>
                </div>
                <div slot="footer">
                    <Button size="large" v-if="isDisabled" @click="handleReject">驳回</Button>
                    <Button type="primary" v-if="isDisabled" size="large" @click="handleToexamine">审核通过</Button>
                    <Button size="large" v-if="!isDisabled" @click="handleClose">取消</Button>
                    <Button size="large" type="primary" v-if="!isDisabled" @click="handleSubmit('formValidate')">确定</Button>
                </div>
            </Modal>
        </global-tables>
    </div>
</template>

<script>
/**
 * 会员列表
 */
import { cyclicRouting, getdate } from '@/util'
import { getModulePermission } from '@/api/user'
import {
    getTablesList,
    Toexamine,
    getShopData,
    getShopDataList,
    reject,
    submit,
    getItemData,
    SendMessage
} from './service'
import GlobalTables from '@/components/GlobalTables'

export default {
    name: 'usersList',
    components: {
        GlobalTables
    },
    data() {
        return {
            total: 0,
            isModal: false,
            ModalTitle: '护士详情',
            list: [],
            cityModel: [],
            cityList: [],
            formValidate: {},
            ruleValidate: {
                RealName: [
                    {
                        required: true,
                        message: '请输入完整信息',
                        trigger: 'change'
                    }
                ],
                Sex: [
                    {
                        required: true,
                        message: '请输入完整信息',
                        trigger: 'change'
                    }
                ],
                Email: [
                    {
                        required: true,
                        message: '请输入完整信息',
                        trigger: 'change'
                    }
                ],
                MobilePhone: [
                    {
                        required: true,
                        message: '请输入完整信息',
                        trigger: 'change'
                    }
                ],
                IdCard: [
                    {
                        required: true,
                        message: '请输入完整信息',
                        trigger: 'change'
                    }
                ],
                Birthday: [
                    {
                        required: true,
                        message: '请输入完整信息',
                        trigger: 'change',
                        pattern: /.+/
                    }
                ],
                Address: [
                    {
                        required: true,
                        message: '请输入完整信息',
                        trigger: 'change'
                    }
                ],
                Education: [
                    {
                        required: true,
                        message: '请输入完整信息',
                        trigger: 'change'
                    }
                ],
                Nation: [
                    {
                        required: true,
                        message: '请输入完整信息',
                        trigger: 'change'
                    }
                ],
                Marry: [
                    {
                        required: true,
                        message: '请输入完整信息',
                        trigger: 'change'
                    }
                ]
            },
            isDisabled: false,
            shopList: [],
            loading: true,
            search: {
                keyword: '',
                ShopID: '',
                pageindex: 1,
                pagesize: 10
            },
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '护士姓名',
                    key: 'RealName',
                    width: 100,
                    render: (h, params) => {
                        return h('div', [
                            // params.row.State == 0 &&
                            h(
                                'div',
                                {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        cursor: 'pointer'
                                    },
                                    on: {
                                        click: () => {
                                            this.handleDetalis(params.row)
                                        }
                                    }
                                },
                                params.row.RealName
                            )
                        ])
                    }
                },
                {
                    title: '护士编号',
                    key: 'NurseNum'
                },
                {
                    title: '注册电话',
                    width: 140,
                    key: 'MobilePhone'
                },
                {
                    title: '年龄',
                    width: 80,
                    key: 'Age'
                },
                {
                    title: '性别',
                    width: 80,
                    key: 'Sex'
                },
                {
                    title: '级别',
                    width: 70,
                    key: 'Level'
                },
                {
                    title: '接单城市',
                    width: 120,
                    key: 'City'
                },
                {
                    title: '签约门店',
                    key: 'ShopName'
                },
                {
                    title: '状态',
                    width: 90,
                    render: (h, params) => {
                        const { State } = params.row
                        if (State == 0) {
                            return h('div', [h('span', '待审批')])
                        } else if (State == 1) {
                            return h('div', [h('span', '已通过')])
                        } else if (State == 2) {
                            return h('div', [h('span', '已驳回')])
                        }
                    }
                },
                {
                    title: '签约时间',
                    width: 115,
                    key: 'PassTime',
                    render: (h, params) => {
                        return h('div', [
                            params.row.PassTime &&
                                h(
                                    'span',
                                    {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        }
                                    },
                                    getdate(
                                        new Date(params.row.PassTime).getTime()
                                    )
                                )
                        ])
                    }
                },
                {
                    title: '操作',
                    width: 150,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            // params.row.State == 0 &&
                            h(
                                'Button',
                                {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        background: '#5ab1ef',
                                        border: 'none',
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.handleBtnClick(
                                                params.row,
                                                'edit'
                                            )
                                        }
                                    }
                                },
                                '修改'
                            ),

                            params.row.State == 1 &&
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            background: '#5ab1ef',
                                            border: 'none',
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.handleShortMessage(
                                                    params.row,
                                                    'edit'
                                                )
                                            }
                                        }
                                    },
                                    '发送短信'
                                )
                        ])
                    }
                }
            ]
        }
    },
    methods: {
        //跳转详情
        handleDetalis(item) {
            this.$router.push({
                path: `/users-nurse-detail/${item.ID}`
            })
        },
        //发送短信
        handleShortMessage(item) {
            this.$Modal.confirm({
                title: `你确定要发送短信吗`,
                onOk: () => {
                    SendMessage({
                        id: item.ID
                    }).then(res => {
                        if (res.state == 'success') {
                            this.$Message.success(res.message)
                        } else {
                            this.$Message.error(res.message)
                        }
                        this.getTablesListData()
                    })
                },
                onCancel: () => {
                    this.$Message.info('取消成功')
                }
            })
        },
        handleBtnClick(item, type) {
            if (!this.allSelectArr) {
                this.$Message.error('请选择一条数据')
                return
            }
            if (this.allSelectArr.length != 1) {
                this.$Message.error('请选择一条数据')
                return
            }
            if (this.allSelectArr[0].State == 0) {
                this.$Message.error('当前状态不允许操作')
                return
            }
            if (type == 'examine') {
                this.isDisabled = true
                getItemData({ id: this.allSelectArr[0].ID }).then(res => {
                    this.formValidate = {
                        ...res.data,
                        Sex: res.data.Sex + ''
                    }
                })
            } else {
                this.isDisabled = false
                getItemData({ id: item.ID }).then(res => {
                    this.formValidate = {
                        ...res.data,
                        Sex: res.data.Sex + ''
                    }
                })
            }
            this.isModal = true
        },
        handleToexamine() {
            Toexamine({
                id: this.formValidate.ID
            }).then(res => {
                if (res.state == 'error') {
                    this.$Message.error(res.message)
                } else {
                    this.$Message.success('操作成功')
                    this.isModal = false
                }
                this.getTablesListData()
            })
        },
        dateFormat(val) {
            let year = val.getFullYear().toString()
            let month =
                val.getMonth() >= 9
                    ? (val.getMonth() + 1).toString()
                    : '0' + (val.getMonth() + 1)
            let date =
                val.getDate() >= 9
                    ? val.getDate().toString()
                    : '0' + val.getDate()
            return year + '-' + month + '-' + date
        },
        handleReject() {
            reject({
                id: this.formValidate.ID
            }).then(res => {
                if (res.state == 'error') {
                    this.$Message.error(res.message)
                } else {
                    this.$Message.success('操作成功')
                    this.isModal = false
                }
                this.getTablesListData()
            })
        },
        /* 提交 */
        handleSubmit() {
            this.$refs.formValidate.validate(valid => {
                if (valid) {
                    this.formValidate = {
                        ...this.formValidate
                    }
                    submit(this.formValidate).then(res => {
                        if (res.state == 'error') {
                            this.$Message.error(res.message)
                        } else {
                            this.$Message.success('操作成功')
                            this.isModal = false
                        }
                        this.getTablesListData()
                    })
                }
            })
        },
        /* 表格数据请求 */
        getTablesListData() {
            const data = this.search
            getTablesList(data).then(res => {
                this.list = res.data.rows
                this.loading = false
                this.total = res.data.records
            })
        },
        handleshopList(data) {
            let ids = data.ID.split('|')
            this.formValidate.ComID = ids[1]
            this.formValidate.ShopID = ids[0]
        },
        /* 表格查询 */
        handleSearch() {
            this.loading = true
            this.getTablesListData()
        },
        handleClose() {
            this.isModal = false
        },
        handleChangeCity(value) {
            this.formValidate.ProvID = value[0]
            this.formValidate.CityID = value[1]
            this.getShopList(value[1])
        },
        getShopList(cityid) {
            getShopDataList({ cityid }).then(res => {
                this.shopList = res.data
            })
        },
        /* 表格分页方法 */
        handleChangePage(type, page) {
            this.loading = true
            if (type == 'page') {
                this.search.pageindex = page
                this.getTablesListData()
            } else {
                this.search.pagesize = page
                this.getTablesListData()
            }
        },
        /* 表单数据 */
        initFormItem() {
            return {}
        },
        getShop() {
            getShopData({}).then(res => {
                this.shopList = res.data.rows
                this.shopList.unshift({
                    ID: 0,
                    ShopName: '全部'
                })
            })
        },
        /* 复选框选中 */
        handleAllSelect(list) {
            this.allSelectArr = list
        }
    },
    mounted() {
        /* 获取菜单的id */
        cyclicRouting(
            JSON.parse(sessionStorage.getItem('user')).menuList,
            this.$route,
            id => {
                /* 按钮权限请求 */
                getModulePermission({
                    roleid: JSON.parse(sessionStorage.getItem('user')).roleid,
                    moduleid: id
                }).then(res => {
                    /* 按钮权限赋值 */
                    for (let item in res.data) {
                        if (res.data[item].name == 'add') {
                            this.isAddBtn = true
                        }
                    }
                    /* 列表请求 */
                    this.getTablesListData()
                    this.getShop()
                })
            }
        )
    }
}
</script>

<style>
</style>
